<template>
  <div class="main">
    <el-card class="box-card">
      <div class="top">
        <div>合作商搜索：</div>
        <el-input v-model="search" class="input" size="medium" placeholder="请输入" />
        <el-button type="primary" size="small" @click="serchIt()">
          <i class="el-icon-search" />
          查询
        </el-button>
      </div>

    </el-card>
    <el-card class="table">
      <el-button type="warning" class="add" @click="openDialog('add')"> <i class="el-icon-circle-plus-outline" />新建</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
      >
        <el-table-column
          prop="date"
          label="序号"
          width="100"
          type="index"
        />
        <el-table-column
          prop="name"
          label="合作商名称"
          width="150"
        />
        <el-table-column
          prop="account"
          label="账号"
          width="140"
        />
        <el-table-column
          prop="vmCount"
          label="设备数量"
          width="140"
        />
        <el-table-column
          prop="ratio"
          label="分成比例"
          width="150"
        />
        <el-table-column
          prop="contact"
          label="联系人"
          width="150"
        />
        <el-table-column
          prop="mobile"
          label="联系电话"
          width="180"
        />

        <el-table-column
          label="操作"
          width="240"
        >
          <template #default="{row}">
            <el-button type="text" @click="openReset(row.id)">重置密码</el-button>
            <el-button type="text" @click="openDeatil(row)">查看详情</el-button>
            <el-button type="text" @click="openEditDialog(row)">修改</el-button>
            <el-button type="text" class="delete" @click="tips(row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <PageTool :info="queryPage" @handleCurrentChange="handleCurrentChange" />
    </el-card>
    <!-- ------------------------分页-----------------TODO---------------------------------- -->
    <!-- -----------------添加弹窗----------------- -->
    <el-dialog
      :title="cardTitle"
      :visible.sync="dialogVisible"
      width="45%"
      @close="close"
    >
      <div class="formDia">
        <el-form ref="addForm" :model="addForm" :rules="rules" label-width="140px">
          <el-form-item label="合作商名称 :" prop="name">
            <el-input
              v-model="addForm.name"
              maxlength="10"
              show-word-limit
              placeholder="请输入"
              class="diaInput"
            />
          </el-form-item>
          <el-form-item label="联系人 :" prop="contact">
            <el-input
              v-model="addForm.contact"
              maxlength="10"
              show-word-limit
              placeholder="请输入"
              class="diaInput"
            />
          </el-form-item>
          <el-form-item label="联系电话 :" prop="mobile">
            <el-input
              v-model="addForm.mobile"
              maxlength="11"
              show-word-limit
              placeholder="请输入"
              class="diaInput"
            />
          </el-form-item>
          <el-form-item label="分成比例(%) :" prop="ratio">
            <el-input-number v-model="addForm.ratio" controls-position="right" :min="1" :max="100" class="inpNumber" />
          </el-form-item>
          <el-form-item label="账号 :" prop="account">
            <el-input
              v-model="addForm.account"
              maxlength="18"
              show-word-limit
              placeholder="请输入"
              class="diaInput"
            />
          </el-form-item>
          <el-form-item label="密码 :" prop="password">
            <el-input
              v-model="addForm.password"
              maxlength="20"
              show-word-limit
              placeholder="请输入"
              class="diaInput"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="warning" plain @click="close">取消</el-button>
            <el-button type="warning" @click="subAdd()">确认</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-dialog>
    <!-- -----------------修改弹窗----------------- -->
    <el-dialog
      title="修改合作商"
      :visible.sync="EditDialogFlag"
      width="45%"
      @closeEdit="closeEdit"
    >
      <div class="formDia">
        <el-form ref="editForm" :model="editForm" :rules="rules" label-width="140px">
          <el-form-item label="合作商名称 :" prop="name">
            <el-input
              v-model="editForm.name"
              maxlength="10"
              show-word-limit
              placeholder="请输入"
              class="diaInput"
            />
          </el-form-item>
          <el-form-item label="联系人 :" prop="contact">
            <el-input
              v-model="editForm.contact"
              maxlength="10"
              show-word-limit
              placeholder="请输入"
              class="diaInput"
            />
          </el-form-item>
          <el-form-item label="联系电话 :" prop="mobile">
            <el-input
              v-model="editForm.mobile"
              maxlength="11"
              show-word-limit
              placeholder="请输入"
              class="diaInput"
            />
          </el-form-item>
          <el-form-item label="分成比例(%) :" prop="ratio">
            <el-input-number v-model="editForm.ratio" controls-position="right" :min="1" :max="100" class="inpNumber" />
          </el-form-item>

          <el-form-item>
            <el-button type="warning" plain @click="closeEdit">取消</el-button>
            <!-- --------------------------------提交修改-------------------- -->
            <el-button type="warning" @click="subUpdate">确认</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-dialog>
    <!------------------- 详情弹窗-------------------->
    <el-dialog
      v-if="detailDia"
      title="合作商详情"
      :visible.sync="detailDia"
      width="40%"
    >
      <div class="detailItem">
        <div> <span>合作商名称：</span><span>{{ detailData.name }}</span></div>
        <div> <span>联系人：</span><span>{{ detailData.contact }}</span></div>
      </div>
      <div class="detailItem">
        <div> <span>联系电话：</span><span>{{ detailData.mobile }}</span></div>
        <div> <span>分成比例：</span><span>{{ detailData.ratio }}%</span></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPartner, addPartner, detailPartner, updatePartner, deletePartner } from '@/api/point/Partner'
import PageTool from '@/views/equipment/components/page-tool.vue'
export default {
  name: '',
  components: {
    PageTool
  },
  props: {
  },
  data() {
    return {
      labelPosition: 'right',
      detailDia: false,
      num: 1,
      dialogVisible: false,
      EditDialogFlag: false,
      search: '',
      tableData: [],
      restid: 0,
      form: {
        name: '',
        desc: ''
      },
      addForm: {
        name: '',
        account: '',
        password: '',
        ratio: '',
        contact: '',
        mobile: ''

      },
      editForm: {
        name: '',
        ratio: '',
        contact: '',
        mobile: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入区域名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入备注', trigger: 'blur' },
          { min: 3, max: 40, message: '长度在 3 到 40个字符', trigger: 'blur' }
        ] },
      type: 'add',
      queryPage: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      },
      detailData: null
    }
  },
  computed: { cardTitle() {
    if (this.type === 'add') {
      return '新增点位'
    } else {
      return '修改点位'
    }
  } },
  created() {
    this.partnerList()
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      this.queryPage.pageIndex = val
      this.partnerList()
    },
    // 提交添加
    async subAdd() {
      await addPartner(this.addForm)
      this.$message.success('添加成功')
      this.dialogVisible = false
      this.partnerList()
    },
    // 查询框搜索
    serchIt() {
      this.tableData = this.tableData.filter(item => item.name === this.search)
    },
    // 获取合作商列表
    async partnerList() {
      const data = await getPartner(this.queryPage)
      this.tableData = data.currentPageRecords
      const { totalCount, totalPage } = await getPartner(this.queryPage)
      this.queryPage.totalCount = totalCount
      this.queryPage.totalPage = totalPage
      console.log(data)
      console.log(this.tableData)
    },
    // 删除提示
    async tips(id) {
      await deletePartner(id)
      this.$message.success('删除成功')
      this.partnerList()
    },
    // 打开详情弹窗
    openDeatil(data) {
      this.detailDia = true
      this.detailData = data
      console.log(this.detailData)
    },
    // 打开添加弹窗
    openDialog(type, id) {
      this.dialogVisible = true
      this.type = type
    },
    // 关闭弹窗
    close() {
      console.log(1)
      this.addForm = {
        name: '',
        account: '',
        password: '',
        ratio: '',
        contact: '',
        mobile: ''
      }
      this.dialogVisible = false
    },
    // 关闭修改弹窗
    closeEdit() {
      console.log(1)
      this.addForm = {
        name: '',
        account: '',
        password: '',
        ratio: '',
        contact: '',
        mobile: ''
      }
      this.EditDialogFlag = false
    },
    // 打开修改弹窗
    openEditDialog(row) {
      this.EditDialogFlag = true
      this.editForm = row
    },
    // 提交修改
    async subUpdate() {
      await updatePartner(this.editForm.id, this.editForm)
      this.$message.success('修改成功')
      this.EditDialogFlag = false
      this.partnerList()
    },
    // 重置密码提示
    openReset(id) {
      this.restid = id
      this.$confirm('确定要重置合作商密码吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        await detailPartner(this.restid)
      }).catch(() => {
        console.log(1)
      })
    }

  }

}
</script>

<style scoped lang='scss'>
.delete{
  color: red;
}
.el-icon-circle-plus-outline{
  margin-right: 7px;
}
.main{
  margin-top: 70px;
  padding: 0 20px;

}

  .top{
display: flex;
justify-content: flex-start;
align-items: center;
  .input{
  width: 200px;
  margin-right: 15px;
}
  }
  .table{
    width: 100%;
    margin-top: 20px;
  }

.formDia{
  padding-right: 60px;
.inpNumber{
  width: 445px;
}
  .diaTextArea{
    margin-top: 20px;
  }
}
.detailItem{
  display: flex;
justify-content: space-evenly;
align-items: center;
margin-bottom: 20px;
}
.add{
  margin-bottom: 25px;
}
</style>
